<script setup>
import { onMounted, ref } from "vue";
import { delPremises, setPremises  } from '../../api/build'
import popupFrame from  './components/PopUpFrame.vue'
onMounted(() => {
  getPremises()
})

const dialogRef = ref(null)
//表格数据
const tableData = ref([])
// 分页事件
const pageSizeData =ref({
  name:null,
  page:1,
  pageSize:5
}) 
const total = ref(0)
const handleSizeChange = (val) => { 
  pageSizeData.value.pageSize = val
  getPremises()
  // console.log(pageSizeData.value.pageSize) 
 }
const handleCurrentChange = (val) => { 
  pageSizeData.value.page = val
  getPremises()
  // console.log(`当前页: ${val}`) 
  // console.log(pageSizeData.value.page) 
  }
  //获取数据列表
const getPremises =async () =>{
  const res = await setPremises(pageSizeData.value)
  tableData.value = res.data.rows
  total.value = res.data.total
  console.log(res , pageSizeData.value);
  }
  //筛选
const sift = () => {
  getPremises()
  pageSizeData.value.name = null
}
  //编辑
const handleEdit = (row) =>{ 
  dialogRef.value.editData(row)
  dialogRef.value.isShow = true
  
 }
  //删除
const handleDelete = async (id) => {
   await delPremises(id)
   getPremises()
 }
 const add = () => {
  dialogRef.value.isShow = true

 }
 const upData = () => {
  dialogRef.value.isShow = false
  getPremises()
 }
 const openShow = () => {
  dialogRef.value.isShow = false
 }
</script>

<template>
  <div class="build">
   <div class="build_search"> 
    <div>楼宇名称:</div>
    <el-input class="input" v-model="pageSizeData.name" placeholder="请输入内容" />
    <el-button class="but" type="primary" @click="sift">查询</el-button>
   </div>

   <el-button @click="add" class="addbuild" type="primary">添加楼宇</el-button>

   <div class="">
          
          <el-table empty-text="暂无数据" :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="序号" width="80"></el-table-column>
            <el-table-column prop="name" label="楼宇名称" width="180"> </el-table-column>
            <el-table-column prop="floors" label="层数" width="180"> </el-table-column>
            <el-table-column prop="area" label="在管面积（㎡）" width="180"> </el-table-column>
            <el-table-column prop="propertyFeePrice" label="物业费（元/㎡）" width="180"> </el-table-column>
            <el-table-column  label="状态" width="180"> 
              <template #default="{row}">
                {{row.status === 0 ? '空置中' : '租赁中'}}
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
              <template #default="{row}">
                <el-button  @click="handleEdit(row.id)">
                  编辑</el-button>
                <el-button
                  :disabled="!!row.status"
                  type="danger"
                  @click="handleDelete(row.id)"
                  >删除</el-button>
              </template>  
            </el-table-column>
          </el-table>
         
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              v-model:currentPage="pageSizeData.page"
              :page-sizes="[5, 10, 20]"
              :page-size="5"
              layout="total,  prev , pager , next , sizes "
              :total="total">
            </el-pagination>
          </div>
   </div>
  </div>
  <popupFrame ref="dialogRef" @up-data="upData" @openShow="openShow"></popupFrame>
</template>

<style scoped>
.build{
  padding: 10px;
  background-color: #ffffff;
}
.build .build_search{
  display: flex;
  border-bottom: 1px solid #fffbfb;
  align-items: center;
  height: 60px;
  }
  .build_search .input{
    margin: 0 10px;
    width: 220px;
  }
  .build_search .input:hover{
    border-block-color:#4770ff ;
  }
  .build_search .but{
    background-color: #4770ff;
  }
  .build_search .but:hover{
    background-color: #7094ff;
  }
  .addbuild{
    margin: 20px 0;
    color: #fff;
    background-color: #4770ff;
  } .addbuild:hover{
    background-color: #7094ff;
  }
  .pagination{
  display: flex;
  justify-content: right;
  width: 100%;
  margin: 20px -20px;
}
</style>
